
<template>
  <view class="swiper-grid-container">
    <!-- 轮播指示器 -->
    

    <!-- 可滑动宫格内容 -->
    <swiper 
      class="grid-swiper"
      :current="currentPage"
      :duration="duration"
      :circular="circular"
      :autoplay="autoplay"
      :interval="interval"
      @change="onPageChange"
    >
	
      <swiper-item 
        v-for="(page, pageIndex) in pages" 
        :key="pageIndex"
      >
        <view class="grid-page">
          <view 
            v-for="(item, index) in page" 
            :key="index"
            class="grid-item" 
            @click="handleItemClick(item)"
          >
            <image 
             
              :src="item.serviceIcon" 
              mode="aspectFit"
              class="grid-icon"
            />
            <text class="grid-text">{{ item.serviceName }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
	<view class="indicator" v-if="showIndicator">
	  <view 
	    v-for="(item, index) in pageCount" 
	    :key="index"
	    :class="['indicator-dot', currentPage === index ? 'active' : '']"
	  ></view>
	</view>
  </view>
</template>

<script>
export default {
  props: {
    // 数据源
    data: {
      type: Array,
      default: () => []
    },
    // 每页行数
    rows: {
      type: Number,
      default: 2
    },
    // 每行列数
    cols: {
      type: Number,
      default: 4
    },
    // 是否显示指示器
    showIndicator: {
      type: Boolean,
      default: true
    },
    // 是否自动轮播
    autoplay: {
      type: Boolean,
      default: false
    },
    // 自动轮播间隔(ms)
    interval: {
      type: Number,
      default: 3000
    },
    // 滑动动画时长(ms)
    duration: {
      type: Number,
      default: 300
    },
    // 是否循环播放
    circular: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentPage: 0
    }
  },
  computed: {
    // 计算分页数据
    pages() {
      const itemsPerPage = this.rows * this.cols
      const pages = []
      
      for (let i = 0; i < this.data.length; i += itemsPerPage) {
        pages.push(this.data.slice(i, i + itemsPerPage))
      }
      
      return pages
    },
    // 总页数
    pageCount() {
      return this.pages.length
    }
  },
  methods: {
    // 页面切换回调
    onPageChange(e) {
      this.currentPage = e.detail.current
      this.$emit('change', this.currentPage)
    },
    // 点击宫格项回调
    handleItemClick(item) {
      this.$emit('itemClick', item)
    }
  }
}
</script>

<style scoped>
.swiper-grid-container {
  width: 100%;
  position: relative;
}

.grid-swiper {
  /* height: auto; */
  height: 300rpx;
}

.grid-page {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
}

.grid-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  box-sizing: border-box;
}

.grid-icon {
  width:54rpx;
  height: 54rpx;
  margin-bottom: 10rpx;
}

.grid-text {
	margin-top: 6rpx;
 font-weight: 400;
 font-size: 24rpx;
 color: #33342E;
}

.indicator {
	margin-top: -20rpx;
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
}

.indicator-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 8rpx;
}

.indicator-dot.active {
  background-color: #ED6F1A;
}
</style>
